﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>ddSlick Demo：下拉列表组件</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=basePath%>include/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>include/ddSlick/jquery.ddslick.min.js"></script>
	<script type="text/javascript">
		/** Dropdown plugin data format：JSON 
		** 自定义下拉列表 ，使用json数据,数据属性：text，value，selected，description，imageSrc
		**/
		var ddData = [
    	{
        	text: "商品发布",
        	value: 1,
        	selected: true,
        	description: "Description with Facebook",
        	imageSrc: ""
    	},
   		{
        	text: "在售商品",
        	value: 2,
        	selected: false,
        	description: "Description with Twitter",
       	 	imageSrc: ""
    	},
    	{
        	text: "未上架商品",
        	value: 3,
        	selected: false,
        	description: "Description with LinkedIn",
        	imageSrc: ""
    	},
    	{
        	text: "批量发布商品",
        	value: 4,
        	selected: false,
        	description: "Description with Foursquare",
        	imageSrc: ""
    	},
    	{
        	text: "搬家工具",
       	 	value: 4,
        	selected: false,
        	description: "Description with Foursquare",
        	imageSrc: ""
    	},
    	{
        	text: "商品体验",
        	value: 4,
        	selected: false,
        	description: "Description with Foursquare",
        	imageSrc: ""
    	}
		];
		/* 组件初始化 */
		$(function(){
			headText ="销售商品";
			$('#myDropdown').ddslick({
    			data:ddData,
    			width:170,
    			//height:40,
    			background : "white",
    			clickOffToClose:false,
    			showSelectedHTML : false,
    			selectText: "Select your preferred social network",
    			imagePosition:"right",
    			onSelected: function(data){
        			//alert(data.selectedData.text+" "+data.selectedData.value);
    			}   
		});
		/* Method： */
		$('#myDropdown').ddslick('open');//保持开启状态
		//$('#myDropdown').ddslick('close');//保持关闭状态
		//$('#myDropdown').ddslick('destroy')
		//$('#myDropdown').ddslick('select', {index: i });//设置被选中项
	});


	</script>
  </head>
  
  <body style="background-color: #eee;">
    <div id="myDropdown"></div>
  </body>
</html>
